﻿<link href="~/miniui_net/demo/demo.css" rel="stylesheet" />
<style>
    body, html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    .images-left {
        float: left;
        width: 24%;
        margin-left: 5px;
        height: 162px;
    }
        .images-left img {
            border: 2px solid #ccc;
        }
</style>
<body>
    <div class="coente" style="height:94%">
        <div class="images-left">
            <img src="" id="imga" style="width: 100%; height: 100%">
            <input id="fileupload1" class="mini-fileupload" name="Fdata" limitType="*" width="192" style="margin-top: 5px;" 
             onfileselect="onfileselect"
             />
        </div>
        <div id="form1" style="width: 60%; height: 100%; float: left;">
            <input name="USERID" type="number" class="mini-hidden" value="0" />
            <table>
                <tr>
                    <td>
                        <label for="textbox1$text">姓名：</label>
                    </td>
                    <td>
                        <input id="USERNAME" name="USERNAME" class="mini-textbox" required="true" width="400" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="pwd1$text">性别：</label>
                    </td>
                    <td>
                        <div name="USERSEX" class="mini-checkboxlist" repeatItems="2" repeatLayout="flow" data="[{text:'男',id:1},{text:'女',id:0}]" value="1" textField="text" valueField="id" width="400"></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="pwd1$text">身份证：</label>
                    </td>
                    <td>
                        <input id="USERCARD" name="USERCARD" class="mini-textbox" required="true" width="400" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="pwd1$text">电话：</label>
                    </td>
                    <td>
                        <input id="USERPHONE" name="USERPHONE" class="mini-textbox" required="true" width="400" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="pwd1$text">地址：</label>
                    </td>
                    <td>
                        <div data-toggle="distpicker" id="aa">
                            <!-- container -->
                            <select  id="receiverState"></select><!-- 省 -->
                            <select id="receiverCity"></select><!-- 市 -->
                            <select id="receiverDistrict"></select><!-- 区 -->
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="pwd1$text">年龄：</label>
                    </td>
                    <td>
                        <input id="USERAGE" type="number" name="USERAGE" class="mini-textbox" required="true" width="400" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="Save">
        <a class="mini-button" img="/miniui_net/scripts/miniui/themes/icons/save.gif" onclick="onDataonClick" style="float:right;">保存</a>
    </div>
</body>
<script src="~/miniui_net/scripts/boot.js"></script>
<script src="~/js/jquery/jquery.js"></script>
<script src="~/js/miniui/distpicker.data.js"></script>
<script src="~/js/jquery/distpicker.js"></script>
<script>
    mini.parse();
    var form = new mini.Form("#form1");
    var fileupload = mini.get("fileupload1");
    var img = $('#imga');
    var PATHNAME; // 图片路径
    var File; // 获取当前选中的图片
    function onfileselect(e) { // 实现图片本地预览
        File = e.file;
        var reader = new FileReader();
        reader.readAsDataURL(File);
        reader.onload = function (e) {
            img.attr('src', this.result)
        } 
    }
    function SetData(data) {
        USERID = data.ID;
        if (data.action == "新增用户信息") {
            form.reset();
        } else {
            //跨页面传递的数据对象，克隆后才可以安全使用
            data = mini.clone(data);
            $.ajax({
                url: "/Home/GetUserDetails",
                type: "post",
                data: { id: data.ID },
                cache: false,
                success: function (text) {
                    form.setData(text); // 给from表单赋值
                    form.setChanged(false); // 关闭遮罩
                    var PROVINCE = text.PROVINCE; // 省
                    var CITY = text.CITY; // 市
                    var COUNTY = text.COUNTY; // 区
                    $("#receiverState").find("[value=" +PROVINCE+ "]").attr("selected", true);
                    $("#receiverState").trigger("change");
                    $("#receiverCity").find("[value=" + CITY + "]").attr("selected", true);
                    $("#receiverCity").trigger("change");
                    $("#receiverDistrict").find("[value=" + COUNTY + "]").attr("selected", true);
                    $("#receiverDistrict").trigger("change");
                    img.attr("src", "/images/" + text.USERPHOTO.substring(text.USERPHOTO.indexOf("images") + 7)); // 当前用户的图片
                    PATHNAME = text.USERPHOTO;
                },
                error: function (text) {
                    alert(text.msg);
                }
            });
        }
    }
    function onDataonClick()
    {
        form.validate(); //验证表单
        if (!form.isValid()) return alert("请按照规定填写数据");
        var data = form.getData();      //获取表单多个控件的数据
        data.PROVINCE = $('#aa')[0].children[0].value; // 省
        data.CITY = $('#aa')[0].children[1].value;// 市
        data.AREA = $('#aa')[0].children[2].value;// 区
        data.COUNTY = $('#aa')[0].children[2].value;// 县
        data.USERID = Number(data.USERID);
        data.USERAGE = Number(data.USERAGE);
        data.USERSEX = Number(data.USERSEX);
        var formData = new FormData();
        formData.append('File', File);
        $.ajax({
            url: "/Home/GetPHoto",
            type: "post",
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            success: function (text) {
                if (text == "") {
                    data.PHOTOPATH = PATHNAME;
                } else {
                    data.PHOTOPATH = text;
                }
                $.ajax({
                    url: "/Home/ActionUserList",
                    type: "post",
                    data: { userViewModel: data },
                    cache: false,
                    success: function (text) {
                        alert(text.msg);
                        window.CloseOwnerWindow();
                    },
                    error: function (text) {
                        alert(text.msg);
                    }
                });
            },
            error: function (text) {
                alert(text.msg);
            }
        });  
    }
</script>